.crop_content {
  width: 36rem;
  height: 36rem;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .crop_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 20rem;
    height: 20rem;
    cursor: move;
    z-index: 2;

    .grid {
      height: 100%;
      opacity: 0.5;

      .grid_h {
        width: 100%;
        height: 33.333%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: 0 dashed var(--color-border);
        border-top-width: 0.1rem;
        border-bottom-width: 0.1rem;
      }
      .grid_v {
        width: 33.333%;
        height: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border: 0 dashed var(--color-border);
        border-left-width: 0.1rem;
        border-right-width: 0.1rem;
      }
    }

    .borders {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .border_item {
        z-index: 1;
        position: absolute;
        background-color: var(--color-primary);

        &:nth-child(1) {
          width: 0.1rem;
          top: 0;
          bottom: 0;
          right: 0;
          cursor: ew-resize;
        }
        &:nth-child(2) {
          height: 0.1rem;
          bottom: 0;
          left: 0;
          right: 0;
          cursor: ns-resize;
        }
        &:nth-child(3) {
          width: 0.1rem;
          top: 0;
          bottom: 0;
          left: 0;
          cursor: ew-resize;
        }
        &:nth-child(4) {
          height: 0.1rem;
          top: 0;
          left: 0;
          right: 0;
          cursor: ns-resize;
        }
      }
    }

    .points {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;

      .point_item {
        width: 0.6rem;
        height: 0.6rem;
        background-color: var(--color-primary);
        position: absolute;

        &:nth-child(1) {
          right: 0;
          top: 0;
          transform: translate(50%, -50%);
          cursor: nesw-resize;
        }
        &:nth-child(2) {
          right: 0;
          top: 50%;
          transform: translate(50%, -50%);
          cursor: ew-resize;
        }
        &:nth-child(3) {
          right: 0;
          bottom: 0;
          transform: translate(50%, 50%);
          cursor: nwse-resize;
        }
        &:nth-child(4) {
          left: 50%;
          bottom: 0;
          transform: translate(-50%, 50%);
          cursor: ns-resize;
        }
        &:nth-child(5) {
          left: 0;
          bottom: 0;
          transform: translate(-50%, 50%);
          cursor: nesw-resize;
        }
        &:nth-child(6) {
          left: 0;
          top: 50%;
          transform: translate(-50%, -50%);
          cursor: ew-resize;
        }
        &:nth-child(7) {
          left: 0;
          top: 0;
          transform: translate(-50%, -50%);
          cursor: nwse-resize;
        }
        &:nth-child(8) {
          left: 50%;
          top: 0;
          transform: translate(-50%, -50%);
          cursor: ns-resize;
        }
      }
    }

    .center_point {
      opacity: 0.75;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      &::before,
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #eee;
      }
      &::before {
        width: 0.7rem;
        height: 0.1rem;
      }
      &::after {
        width: 0.1rem;
        height: 0.7rem;
      }
    }
  }
}
